後端幼幼班Day11 HTML篇 HTML基本介紹及常用語法 Part2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 11

0

Modern Web

Willisの後端幼幼班系列第 11 篇

後端幼幼班Day11 HTML篇 HTML基本介紹及常用語法 Part2

14th鐵人賽

團隊imac_Big3

2022-09-26 09:17:53

662 瀏覽

分享至

大家好啊 ~今天小弟我呢，又要來介紹HTML囉 ! v(￣︶￣)y

HTML基本語法教學

Table(表格) `<table> </table>`

<tr>橫列
<td>直行
<th>欄位標題
網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </table>
</body>
</html>

執行結果

Input(輸入) `<input>`

input標籤設定屬性:

name(欄位名稱)
value(初始值)
type(類型)
網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input name="password" value="請輸入密碼" type="input">
</body>
</html>

執行結果

Select(下拉選單) `<select> </select>`

<option>選項

select標籤設定屬性:

name(欄位名稱)
網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <select>
        <option>下拉選擇</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</body>
</html>

執行結果

Button(按鈕) `<button> </button>`

button標籤設定屬性:

name(欄位名稱)
type(類型) : submit(表單內容送出)、reset(表單內容重置)、button(一般按鈕)
網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button type="submit" name="button">按鈕</button>
</body>
</html>

執行結果

List(列表標籤) `無序清單<ul> </ul> 有序清單<ol> </ol> 清單內容<li> </li>`

網頁 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>第一點</li>
        <li>第二點</li>
        <li>第三點</li>
    </ul>
    <ol>
        <li>第一點</li>
        <li>第二點</li>
        <li>第三點</li>
    </ol>
</body>
</html>

執行結果

Form(表單標籤) `<form> </form>`

From(表單標籤)是使用者輸入資料，將這些資料做處理或者是回傳，講到Flask時會介紹使用方法。

form標籤設定屬性:

action(指定位址)
method(資料傳輸) : get 、 post
網頁 index.html

參考資料

https://www.youtube.com/watch?v=CLUPkcLQm64&ab_channel=GrandmaCan-%E6%88%91%E9%98%BF%E5%AC%A4%E9%83%BD%E6%9C%83
https://www.fooish.com/html/

結尾

其實HTML的語法還有很多很多，但因為我的文章主題是後端，所我就只有介紹一些之後文章可能會使用到的語法而已，如果你們還想看更多語法可以點上面的參考資料或者自行搜尋唷 ~ε٩(๑> ₃ <)۶з

後端幼幼班Day10 HTML篇 HTML基本介紹及常用語法 Part1

後端幼幼班Day12 Flask篇 Flask介紹

系列文

Willisの後端幼幼班共 30 篇

目錄

RSS系列文訂閱系列文

10 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1050 組

團體組數

40 組

累計文章數

17572 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙